<template>
    <div class="move_resource_container" :style="containerStyle">
        <ul id="moveTree" class="ztree" />
    </div>
</template>

<script>

export default {
    name: "MoveHelp",
    props: {
        propsData: {
            type: Object,
            default() {
                return {
                    init: true,
                };
            },
        },
    },
    data() {
        return {
            moveZTree: null,
            ztreeSetting: {
                view: {
                    selectedMulti: false
                },
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                edit: {
                    enable: false
                }
            },
        };
    },
    computed: {
        containerStyle() {
            let height = $(this.getActiveTabsContainer()).height();
            return {
                maxHeight: `${ height * 0.8 - 100 }px`,
            };
        },
    },
    watch: {
        propsData: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (_this.propsData.init) {
                return;
            }
            _this.$nextTick(() => {
                _this.initZTree();
            });
        },
        transferZTreeData(datas, selectList) {
            const _this = this;
            let list = [];
            if (_this.$utils.isNotEmptyList(datas)) {
                datas.filter(item => selectList.indexOf(item.sid) === -1).forEach(item => {
                    let obj = {};
                    obj.id = item.sid;
                    obj.pId = item.parent_sid;
                    obj.name = item.name;
                    obj.res_type = item.res_type;
                    if (_this.$utils.isNotEmpty(item.icon_url) && item.icon_url.indexOf('fa') !== - 1) {
                        obj.iconSkin = item.icon_url;
                        obj.iconColor = item.icon_color;
                    }
                    if (_this.$utils.isNotEmpty(item.res_type) && item.res_type !== 'button') {
                        list.push(obj);
                    }
                    if (_this.$utils.isNotEmptyList(item.childrens)) {
                        let childs = _this.transferZTreeData(item.childrens, selectList);
                        childs.forEach(item => {
                            list.push(item);
                        });
                    }
                });
            }
            return list;
        },
        initZTree() {
            const _this = this;
            let selectList = (_this.propsData.selection || []).map(item => item.sid);
            let list = _this.transferZTreeData(_this.propsData.treeData, selectList);
            list.push({
                id: '-1',
                pId: '-999',
                name: '根节点'
            });
            let setting = $.extend(_this.ztreeSetting, {
                check: {
                    enable: true,
                    chkStyle: 'radio',
                    radioType: 'all'
                },
                callback: {
                    onClick: function (e, treeId, treeNode, clickFlag) {
                        if (!treeNode.checked) {
                            _this.moveZTree.checkNode(treeNode, !treeNode.checked, true);
                        }
                    }
                }
            });
            _this.moveZTree = $.fn.zTree.init($("#moveTree"), setting, list);
            _this.moveZTree.expandAll(true);
        },
        async confirm() {
            const _this = this;
            let nodes = _this.moveZTree.getCheckedNodes(true);
            if (!_this.$utils.isNotEmptyList(nodes)) {
                _this.$message.info('请选择移动位置！');
                return false;
            }
            let subData = {};
            subData.ids = (_this.propsData.selection || []).map(item => {
                return item.sid;
            });
            subData.newParentId = nodes[0].id;
            return _this.fetchData(_this.$api.API_ChangeResourceParentId, subData).then(() => {
                _this.$message.success('移动资源成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.move_resource_container {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>
